<template>
  <div class="bg">
    <div class="header">
      <div class="logoSection">
        <div class="headerLogo"></div>
        <!-- <div class="headerTitle">视讯系统</div> -->
      </div>
      <div class="menuSection">
        <a-button
          type="primary"
          icon="play-square"
          :class="playMode == 'live' ? 'btnSelected' : ''"
          @click="playModeChange('live')"
          >实时监看</a-button
        >
        <a-button
          type="primary"
          icon="video-camera"
          :class="playMode == 'record' ? 'btnSelected' : ''"
          @click="playModeChange('record')"
          >录像监看</a-button
        >
        <a-dropdown v-if="false" placement="bottomCenter">
          <a-button type="primary" icon="folder-open"
            >{{
              playMode == "live"
                ? "实时"
                : playMode == "record"
                ? "录像"
                : "监看"
            }}设置</a-button
          >
          <a-menu slot="overlay" theme="dark">
            <a-menu-item-group v-if="playMode == 'live'">
              <a-menu-item key="setting:1"> 保存实时多画面存档 </a-menu-item>
              <a-menu-item key="setting:2"> 加载实时多画面存档 </a-menu-item>
            </a-menu-item-group>
            <a-menu-item-group v-if="playMode == 'record'">
              <a-menu-item key="setting:1"> 保存录像多画面存档 </a-menu-item>
              <a-menu-item key="setting:2"> 加载录像多画面存档 </a-menu-item>
            </a-menu-item-group>
          </a-menu>
        </a-dropdown>
        <a-dropdown placement="bottomCenter">
          <a-button type="primary" icon="layout">界面设置</a-button>
          <!--interaction-->
          <a-menu slot="overlay" theme="light">
            <a-sub-menu key="sub1">
              <span slot="title">底边</span>
              <a-menu-item @click="() => (showFooter = true)">
                显示<a-icon v-if="showFooter" type="check" />
              </a-menu-item>
              <a-menu-item @click="() => (showFooter = false)">
                隐藏<a-icon v-if="!showFooter" type="check" />
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">右侧工具栏</span>
              <a-menu-item @click="() => (showTool = true)">
                显示<a-icon v-if="showTool" type="check" />
              </a-menu-item>
              <a-menu-item @click="() => (showTool = false)">
                隐藏<a-icon v-if="!showTool" type="check" />
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title">云台控制</span>
              <a-menu-item @click="() => (showPtz = true)">
                显示<a-icon v-if="showPtz" type="check" />
              </a-menu-item>
              <a-menu-item @click="() => (showPtz = false)">
                隐藏<a-icon v-if="!showPtz" type="check" />
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub4">
              <span slot="title">播放器标题栏</span>
              <a-menu-item @click="() => (showPlayerHeader = true)">
                显示<a-icon v-if="showPlayerHeader" type="check" />
              </a-menu-item>
              <a-menu-item @click="() => (showPlayerHeader = false)">
                隐藏<a-icon v-if="!showPlayerHeader" type="check" />
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="systemConfig" ref="test">
        <!-- <a-tooltip placement="top">
					<template slot="title">
						<span>grid1</span>
					</template>
					<div class="iconContain iconsize grid1"></div>
				</a-tooltip> -->
        <div
          class="iconContain iconsize grid1"
          @click="
            () => {
              rowNum = 1;
              updateLayoutView();
            }
          "
        ></div>
        <div
          class="iconContain iconsize grid2"
          @click="
            () => {
              rowNum = 2;
              updateLayoutView();
            }
          "
        ></div>
        <div
          class="iconContain iconsize grid3"
          @click="
            () => {
              rowNum = 3;
              updateLayoutView();
            }
          "
        ></div>
        <div style="width: 80px; float: left; margin-left: 5px">
          <a-select
            v-model="rowNum"
            placeholder="请选择行数"
            @change="updateLayoutView"
          >
            <a-select-option :value="item" v-for="item in 4" :key="item">{{
              item + "*" + item + "屏"
            }}</a-select-option>
          </a-select>
        </div>
        <div
          :class="
            'iconContain iconsize ' +
            (allPause() ? 'playerplay' : 'playerpause') +
            ''
          "
          @click="allPlayPause"
        ></div>
        <div
          class="iconContain iconsize playerstop"
          @click="allPlayerStop"
        ></div>
        <div
          :class="
            'iconContain iconsize ' +
            (allVolumeMute() ? 'mutevolume' : 'unmutevolume') +
            ''
          "
          @click="allVolumeControl"
        ></div>
        <div
          class="iconContain iconsize mulifull"
          @click="fullscreenClick"
        ></div>
        <!-- <a-tooltip placement="top">
					<template slot="title">
						<span>截屏1</span><br/>
						<span>截屏2</span><br/>
						<span>截屏3</span>
					</template>
					<div class="iconContain">
						<a-icon type="camera" class="iconsize" style="margin-top: 3px;"/>
					</div>
				</a-tooltip> -->
        <div style="float: left; margin-left: 5px">
          <a class="logout_title" @click="handleLogout" style="font-size: 18px">
            <a-icon type="logout" />
            <span>退出登录</span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="center"
      style="display: flex"
      :style="'bottom: ' + (showFooter ? 30 : 0) + 'px;'"
    >
      <div
        id="layoutContain"
        class="showArea"
        :style="
          'width: calc(100% - ' +
          (showTool ? 300 : 0) +
          'px); height:100%; background-color:#383d41;'
        "
      >
        <div v-if="false" id="content">
          <grid-layout
            ref="gridlayout"
            :layout.sync="layout"
            :col-num="colNum"
            :max-rows="rowNum"
            :row-height="rowHeight"
            :is-draggable="draggable"
            :is-resizable="resizable"
            :vertical-compact="true"
            :margin="[borderWidth, borderWidth]"
            :prevent-collision="preventCollision"
            :use-css-transforms="true"
            :style="'height:' + this.layoutHeight + 'px'"
            @layout-updated="layoutUpdatedEvent"
          >
            <div
              :style="
                'width:100%;height:100%;position: absolute;border:' +
                borderWidth +
                'px solid black;'
              "
            >
              <!-- <div style=""></div> -->
              <!-- 4*4*2， -->
              <!-- 先画横线，再画竖线 -->
              <div
                v-for="i in rowNum - 1"
                :key="'row' + i"
                :style="
                  'width:100%;height:0;position: absolute;top:' +
                  (rowHeight * i + borderWidth * (i - 1)) +
                  'px;border-bottom:' +
                  (borderWidth == 0 ? 1 : borderWidth) +
                  'px ' +
                  (true ? 'solid black;' : 'dashed gray;')
                "
              ></div>
              <div
                v-for="i in colNum - 1"
                :key="'col' + i"
                :style="
                  'width:0;height:100%;position: absolute;left:' +
                  (rowWidth * i + borderWidth * (i - 1)) +
                  'px;border-right:' +
                  (borderWidth == 0 ? 1 : borderWidth) +
                  'px ' +
                  (true ? 'solid black;' : 'dashed gray;')
                "
              ></div>
            </div>
            <!-- <grid-item class="itemcontent" :name="item.i" :key="item.i" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" drag-ignore-from=".text" drag-allow-from=".remove"> -->
            <grid-item
              class="itemcontent"
              :name="item.i"
              :key="item.i"
              v-for="item in layout"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              @resized="resizedEvent"
              drag-ignore-from=".remove"
            >
              <!-- <span class="text">{{ item.i + ':' + item.pName }}</span> -->
              <div style="width: 100%; height: 100%; background-color: red">
                <!-- <img v-if="item.iconUrl" :src="item.iconUrl" alt="" :style="'position:absolute;top:50%;left:50%;width:' + parseInt(iconWidth(item) * 0.8) + 'px;height:' + parseInt(iconWidth(item) * 0.8 * (item.isTime ? 1 : 0.6)) + 'px;margin-left:' + ( -1 * parseInt(iconWidth(item) * 0.8) * 0.5 )+ 'px;margin-top:' + ( -1 * parseInt(iconWidth(item) * 0.8 * (item.isTime ? 1 : 0.6)) * 0.5 ) + 'px;'"> -->
                <!-- <div :style="'position:absolute;top:75%;height: 25%;width: 100%;text-align: center;font-size: ' + parseInt(iconWidth(item)/100*14)   +'px;'">{{ item.pName }}</div> -->
              </div>
              <a-icon
                class="remove"
                @click="removeItem(item.i)"
                type="close-circle"
              />
            </grid-item>
          </grid-layout>
        </div>
        <div
          v-for="i in rowNum * rowNum"
          :key="i"
          :name="i"
          class="playerContain"
          v-show="!hasFull || (hasFull && urlList[i - 1].isFull)"
          :style="playContainStyle(urlList[i - 1], i - 1)"
        >
          <div
            v-if="playMode == 'live'"
            :style="
              'width: 100%;height: 100%;' +
              (selectNum == i ? 'box-shadow: 0 0 2px 2px #1597e3;' : '') +
              ''
            "
            @click="playerSelected(urlList[i - 1], i)"
          >
            <div v-if="showPlayerHeader" class="playerHeader">
              {{ urlList[i - 1].playerHeaderText
              }}{{ urlList[i - 1].playerStatusText }}
            </div>
            <Player
              :style="
                'width: 100%;height: calc(100% - ' +
                (showPlayerHeader ? 20 : 0) +
                'px);'
              "
              :ref="'player' + i"
              :urlOption="urlList[i - 1].urlOption"
              :item="urlList[i - 1]"
            ></Player>
            <div
              v-if="
                urlList[i - 1].status == 'delete' ||
                urlList[i - 1].status == 'unused' ||
                urlList[i - 1].status == 'offline'
              "
              :style="
                'position: absolute;left:0;bottom:0;width: ' +
                rowWidth +
                'px;height: ' +
                rowHeight +
                'px;background-color: rgba(255,0,0,0.1);'
              "
            >
              <a-icon
                v-if="urlList[i - 1].status == 'delete'"
                type="delete"
                :style="
                  'width:100%;top: 30%;position: absolute;font-size: ' +
                  rowHeight / 3 +
                  'px;color:#e10602'
                "
              />
              <a-icon
                v-if="urlList[i - 1].status == 'unused'"
                type="stop"
                :style="
                  'width:100%;top: 30%;position: absolute;font-size: ' +
                  rowHeight / 3 +
                  'px;color:#e10602'
                "
              />
              <a-icon
                v-if="urlList[i - 1].status == 'offline'"
                type="disconnect"
                :style="
                  'width:100%;top: 30%;position: absolute;font-size: ' +
                  rowHeight / 3 +
                  'px;color:#e10602'
                "
              />
            </div>
          </div>
          <div v-if="playMode == 'record'" style="width: 100%; height: 100%">
            <div v-if="showPlayerHeader" class="playerHeader">
              {{ urlList[i - 1].playerHeaderText }}
            </div>
            <Player
              :style="
                'width: 100%;height: calc(100% - ' +
                (showPlayerHeader ? 20 : 0) +
                'px);'
              "
              :ref="'player' + i"
              :urlOption="urlList[i - 1].urlOption"
              :item="urlList[i - 1]"
            ></Player>
          </div>
        </div>
      </div>
      <div
        v-if="showTool"
        class="tool"
        style="
          min-width: 300px;
          width: 300px;
          height: 100%;
          border-left: 2px solid #111111;
          display: flex;
          flex-direction: column;
        "
      >
        <!-- 实时监看 -->
        <div v-if="playMode == 'live'" style="width: 100%; height: 100%">
          <div
            :style="
              'height: calc(100% - ' +
              (showPtz ? 450 : 0) +
              'px);width: 100%;background-color: #252f2e;'
            "
          >
            <a-tree
              v-if="false"
              :tree-data="treeData"
              show-icon
              default-expand-all
              :default-selected-keys="['0-0-0']"
              @select="onSelect"
              draggable
              @dragend="onDragend"
            >
              <a-icon slot="switcherIcon" type="down" />
              <a-icon slot="camera" type="video-camera" theme="filled" />
              <a-icon slot="environment" type="environment" theme="filled" />
              <!-- <a-icon slot="meh" type="smile-o" /> -->
              <!-- <template slot="custom" slot-scope="{ selected }">
								<a-icon :type="selected ? 'frown' : 'smile-o'" />
							</template> -->
            </a-tree>
            <el-tree
              :data="treeDataEL"
              default-expand-all
              draggable
              :allow-drag="handle_node_allow_drag"
              :allow-drop="handle_node_allow_drop"
              @node-drag-end="handle_node_drag_end"
              style="height: 100%"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                :style="
                  'color:' + (cameraEnable(data) ? '#dddddd' : 'gray') + ''
                "
              >
                <span v-if="node.label">{{
                  node.label +
                  (data.domainType == "2"
                    ? data.state == "2"
                      ? "(下线)"
                      : data.state == "3"
                      ? "(禁用)"
                      : ""
                    : "")
                }}</span>
                <span v-else>{{
                  data.name +
                  (data.used == "0"
                    ? "(禁用)"
                    : data.online == "0"
                    ? "(离线)"
                    : "")
                }}</span>
                <span
                  v-if="!data.children"
                  style="
                    position: absolute;
                    right: 10px;
                    min-width: 20px;
                    height: 20px;
                  "
                >
                  <!-- <a-icon v-if="data.used == '0'" type="stop"></a-icon>
									<a-icon v-else type="check-circle"></a-icon>
									
									<a-icon v-if="data.online == '0'" type="disconnect"></a-icon>
									<a-icon v-else type="global"></a-icon>
									
									<a-tooltip placement="top">
										<template slot="title">
											<span class="ratevalue">摄像机参数</span>
										</template>
										<a-icon type="info-circle"></a-icon>
									</a-tooltip> -->

                  <a-icon
                    v-if="data.used == '0'"
                    type="stop"
                    style="margin-right: 3px"
                  ></a-icon>
                  <a-icon
                    v-if="data.used != '0' && data.online == '0'"
                    type="disconnect"
                    style="margin-right: 3px"
                  ></a-icon>
                  <a-icon
                    v-if="data.used != '0' && data.online != '0'"
                    type="check-circle"
                    style="margin-right: 3px"
                  ></a-icon>

                  <a-tooltip placement="top">
                    <template v-if="cameraEnable(data)" slot="title">
                      <span class="ratevalue">{{
                        data.recordState == "loading"
                          ? "设置中"
                          : data.recordState
                          ? "正在录像"
                          : "设置快速录像"
                      }}</span>
                    </template>
                    <a-icon
                      v-if="data.recordState == 'loading'"
                      type="loading"
                    />
                    <a-icon
                      v-if="data.recordState == true"
                      type="video-camera"
                      theme="filled"
                    ></a-icon>
                    <a-icon
                      v-if="data.recordState == false && cameraEnable(data)"
                      type="video-camera"
                      theme="outlined"
                      @click="quickRecord(data)"
                    ></a-icon>
                    <a-icon
                      v-if="data.recordState == false && !cameraEnable(data)"
                      type="video-camera"
                      theme="outlined"
                    ></a-icon>
                  </a-tooltip>
                </span>
              </span>
            </el-tree>
          </div>
          <pan-tilt
            ref="ptz"
            v-if="showPtz"
            :selectItem="selectItem"
            :ptzEnable="ptzEnable"
            :style="
              'height: ' +
              (showPtz ? 450 : 0) +
              'px;width: 100%;background-color: #252f2e;'
            "
          ></pan-tilt>
        </div>
        <!-- 录像筛选 -->
        <div v-if="playMode == 'record'" style="width: 100%; height: 100%">
          <div
            style="
              height: calc(100% - 0px);
              width: 100%;
              background-color: #252f2e;
            "
          >
            <a-collapse :bordered="false" v-model="activeKey">
              <a-collapse-panel key="1" header="录像筛选">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                  <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                      <a-form-item
                        label="请选择域"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 16, offset: 1 }"
                      >
                        <a-select
                          v-model="queryParam.regionId"
                          placeholder="请选择域"
                          @change="areaChoose"
                        >
                          <a-select-option
                            :value="item.serverGBId"
                            v-for="item in areaList"
                            :key="item.serverGBId"
                            :disabled="
                              item.domainType != '1' && item.state != '1'
                            "
                            >{{
                              item.domainType == "1"
                                ? "本"
                                : item.domainType == "2"
                                ? "外"
                                : ""
                            }}- {{ item.name }}-
                            {{
                              item.relation == "1"
                                ? "下级"
                                : item.domainType == "2"
                                ? "互联"
                                : ""
                            }}
                            {{
                              item.state == "1"
                                ? "在线"
                                : item.state == "2"
                                ? "下线"
                                : item.state == "3"
                                ? "禁用"
                                : ""
                            }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                      <a-form-item
                        label="类别"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 18, offset: 1 }"
                      >
                        <a-radio-group v-model="queryParam.type">
                          <a-radio-button value="camera">摄像机</a-radio-button>
                          <a-radio-button value="task">任务</a-radio-button>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                    <a-col v-if="queryParam.type == 'camera'" :md="24" :sm="24">
                      <a-form-item
                        label="摄像机名"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 16, offset: 1 }"
                      >
                        <a-input
                          placeholder="请输入摄像机查询"
                          v-model="queryParam.cameraName"
                        ></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col v-if="queryParam.type == 'task'" :md="24" :sm="24">
                      <a-form-item
                        label="任务名称"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 16, offset: 1 }"
                      >
                        <a-input
                          placeholder="请输入任务查询"
                          v-model="queryParam.taskName"
                        ></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                      <a-form-item
                        label="开始时间:"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 18, offset: 1 }"
                      >
                        <a-date-picker
                          v-model="startValue"
                          :disabled-date="disabledStartDate"
                          show-time
                          :allowClear="false"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="Start"
                          @openChange="handleStartOpenChange"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                      <a-form-item
                        label="结束时间:"
                        :labelCol="{ span: 5 }"
                        :wrapperCol="{ span: 18, offset: 1 }"
                      >
                        <a-date-picker
                          v-model="endValue"
                          :disabled-date="disabledEndDate"
                          show-time
                          :allowClear="false"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="End"
                          :open="endOpen"
                          @openChange="handleEndOpenChange"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                      <div style="margin-left: 100px">
                        <button
                          class="btn"
                          @click="searchQuery"
                          style="
                            width: 70px;
                            height: 35px;
                            line-height: 30px;
                            border-radius: 5px;
                          "
                        >
                          <span>查询</span>
                        </button>
                        <button
                          class="btn"
                          @click="searchReset"
                          style="
                            width: 70px;
                            height: 35px;
                            line-height: 30px;
                            border-radius: 5px;
                          "
                        >
                          <span>重置</span>
                        </button>
                      </div>

                      <!-- <a-button type="primary" @click="searchQuery">查询</a-button>
											<a-button type="primary" style="margin-left: 8px" @click="searchReset">重置</a-button> -->
                    </a-col>
                  </a-row>
                </a-form>
              </a-collapse-panel>
            </a-collapse>
            <a-table
              ref="table"
              size="small"
              rowKey="fileLogId"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
              :style="
                'width:100%;height: calc(100% - 47px - ' +
                (activeKey && activeKey.length ? 247 : 0) +
                'px);overflow-y:auto'
              "
            >
              <div
                slot="taskName"
                slot-scope="text, record"
                draggable
                @dragend="recordDragend"
                :record="JSON.stringify(record)"
              >
                <div
                  style="
                    user-select: none;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: 234px;
                  "
                >
                  {{
                    queryParam.type == "task"
                      ? record.taskName + " / " + record.cameraName
                      : record.cameraName + " / " + record.taskName
                  }}
                </div>
                <div style="user-select: none">
                  {{
                    moment(record.startDateTime).format("MM-DD HH:mm:ss") +
                    " / " +
                    moment(record.endDateTime).format("MM-DD HH:mm:ss")
                  }}
                </div>
                <Download
                  v-if="record.showDownload"
                  :record="record"
                  style="user-select: none; max-width: 234px"
                ></Download>
              </div>

              <span slot="action" slot-scope="text, record">
                <a @click="downLoadRecord(record)">{{
                  record.showDownload ? "取消下载" : "下载"
                }}</a>
              </span>
            </a-table>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showFooter" class="footer">
      <span style="margin-left: 10px"
        >用户:{{ userInfo().realName }} | 登陆时间:{{ loginTime }} | 当前视图:{{
          colNum + "*" + rowNum
        }}画面</span
      >
      <!-- <a-slider id="test" :default-value="30" /> -->
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
import VueGridLayout from "vue-grid-layout";
import Vue from "vue";
import eventBus from "../../components/eventBus.js";
import { USER_INFO } from "@/store/mutation-types";
import { mapActions, mapGetters, mapState } from "vuex";
import Player from "./Player.vue";
import PanTilt from "./PanTilt.vue";
import { getAction, postAction } from "@/api/manage";
import { Realtime } from "@/api/api";
import mqtt from "mqtt";
import {
  addQuickRecord,
  getPlatformList,
  otheRegionRecordUrl,
  RealTime,
} from "@/api/api";
// import pick from 'lodash.pick';
import moment from "moment";
// import { ACCESS_TOKEN } from '@/store/mutation-types';
// import Vue from 'vue';
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import Download from "./Download.vue";
const treeData = [
  {
    title: "地铁南站",
    key: "0-0",
    slots: {
      icon: "environment",
    },
    children: [
      { title: "1001地铁南站A出口", key: "0-0-0", slots: { icon: "camera" } },
      { title: "1002地铁南站A出口", key: "0-0-1", slots: { icon: "camera" } },
      { title: "1003地铁南站A出口", key: "0-0-2", slots: { icon: "camera" } },
      { title: "1004地铁南站A出口", key: "0-0-3", slots: { icon: "camera" } },
      { title: "1005地铁南站A出口", key: "0-0-4", slots: { icon: "camera" } },
      { title: "1006地铁南站A出口", key: "0-0-5", slots: { icon: "camera" } },
    ],
  },
  {
    title: "地铁北站",
    key: "0-1",
    slots: {
      icon: "environment",
    },
    children: [
      { title: "1001地铁北站A出口", key: "0-1-0", slots: { icon: "camera" } },
      { title: "1002地铁北站A出口", key: "0-1-1", slots: { icon: "camera" } },
      { title: "1003地铁北站A出口", key: "0-1-2", slots: { icon: "camera" } },
      { title: "1004地铁北站A出口", key: "0-1-3", slots: { icon: "camera" } },
      { title: "1005地铁北站A出口", key: "0-1-4", slots: { icon: "camera" } },
      { title: "1006地铁北站A出口", key: "0-1-5", slots: { icon: "camera" } },
      { title: "1007地铁北站A出口", key: "0-1-6", slots: { icon: "camera" } },
      { title: "1008地铁北站A出口", key: "0-1-7", slots: { icon: "camera" } },
      { title: "1009地铁北站A出口", key: "0-1-8", slots: { icon: "camera" } },
      { title: "1010地铁北站A出口", key: "0-1-9", slots: { icon: "camera" } },
      { title: "1011地铁北站A出口", key: "0-1-10", slots: { icon: "camera" } },
      { title: "1012地铁北站A出口", key: "0-1-11", slots: { icon: "camera" } },
      { title: "1013地铁北站A出口", key: "0-1-12", slots: { icon: "camera" } },
      { title: "1014地铁北站A出口", key: "0-1-13", slots: { icon: "camera" } },
      { title: "1015地铁北站A出口", key: "0-1-14", slots: { icon: "camera" } },
      { title: "1016地铁北站A出口", key: "0-1-15", slots: { icon: "camera" } },
      { title: "1017地铁北站A出口", key: "0-1-16", slots: { icon: "camera" } },
      { title: "1018地铁北站A出口", key: "0-1-17", slots: { icon: "camera" } },
      { title: "1019地铁北站A出口", key: "0-1-18", slots: { icon: "camera" } },
      { title: "1020地铁北站A出口", key: "0-1-19", slots: { icon: "camera" } },
    ],
  },
];
// const dataSource = [
// 	{
// 		"createTime":"2022-04-25T16:42:49.072",
// 		"updateTime":"2022-04-25T16:42:49.072",
// 		"fileLogId":"474597a17ee5e3d918932d1b5de527b1",
// 		"cameraId":"be6faf372f3241cfae0fbd1a5ee6375e",
// 		"cameraName":"1号摄像机",
// 		"taskId":"af5f7b02038e3efb61aed79316a4d10f",
// 		"taskName":"aaa_1号摄像机",
// 		"startDateTime":"2022-04-25 16:42:40",
// 		"endDateTime":"2022-04-25 16:45:35",
// 		"state":"1_2",
// 		"recordUrl":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8",
// 		"taskType":"0",
// 		"showDownload":false
// 	},
// 	{
// 		"createTime":"2022-04-25T16:42:36.186",
// 		"updateTime":"2022-04-25T16:42:36.186",
// 		"fileLogId":"f76852db9210d55c6780fc46d1dde7af",
// 		"cameraId":"be6faf372f3241cfae0fbd1a5ee6375e",
// 		"cameraName":"1号摄像机",
// 		"taskId":"ea94dbd97d360bdb040b175108b75196",
// 		"taskName":"ss_1号摄像机",
// 		"startDateTime":"2022-04-25 16:42:32",
// 		"endDateTime":"2022-04-25 16:43:32",
// 		"state":"1_1",
// 		"recordUrl":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8",
// 		"taskType":"0",
// 		"showDownload":false
// 	}
// ]
export default {
  name: "login",
  mixins: [JeecgListMixin],
  components: {
    Player,
    PanTilt,
    Download,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data() {
    return {
      title: "1111",
      model: {},

      startValue: moment().subtract(1, "days"),
      endValue: moment(),
      endOpen: false,

      isFullScreen: false, //多画面全屏到屏幕
      hasFull: false, //是否有单画面全屏到多画面
      urlList_live: [],
      urlList_record: [],

      loginTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      // current: ['mail'],
      playMode: "live", //live直播,record录像
      showFooter: true, //是否显示底边
      showTool: true, //是否显示右边
      showPlayerHeader: true, //是否显示播放器头
      ptzEnable: false,
      showPtz: true,
      selectNum: 0,
      selectItem: null,
      treeData,
      treeDataEL: [],
      disableMixinCreated: true,
      // dataSource,
      // testurl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8',
      testurl: "",

      layout: [],
      // colNum: 2,
      rowNum: 2,
      layoutWidth: 800,
      layoutHeight: 600,
      rowHeight: 30,
      rowWidth: 40,
      borderWidth: 2,
      draggable: true,
      resizable: true,
      gridstatic: false,
      preventCollision: false,

      // MQTT
      options: {
        // 不关心之前的离线消息
        cleanSession: true,
        // 超时时间
        connectTimeout: 4000,
        // 重连时间间隔
        reconnectPeriod: 4000,
        //多个页面打开时不能重复否则会相互顶掉重复的clentId
        clientId: "",
      },
      connectUrl: `${process.env.VUE_APP_MQTT}`, //ws://test3.iksonya.com:8083/mqtt
      topic: "/pvp/common/msg",
      client: null,

      activeKey: ["1"],
      areaList: [],
      queryParam: {
        type: "task",
        cameraName: "",
        taskName: "",
        //platformId: '',
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 20,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: false,
        showSizeChanger: false,
        total: 0,
      },
      columns: [
        {
          title: "名称",
          align: "left",
          dataIndex: "taskName",
          scopedSlots: { customRender: "taskName" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
          width: 40,
        },
      ],
      // 外域录像
      columns1: [
        {
          title: "名称",
          align: "left",
          dataIndex: "taskName",
          scopedSlots: { customRender: "taskName" },
        },

        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
          width: 40,
        },
      ],
      url: {
        list: "/record/file-log/page",
        delete: "/platform/delete",
        deleteBatch: "/platform/delete-batch",
      },
      debug: false,
    };
  },
  computed: {
    colNum() {
      return this.rowNum;
    },
    urlList() {
      if (this.playMode == "live") {
        return this.urlList_live;
      } else {
        return this.urlList_record;
      }
    },
  },
  watch: {
    rowNum(v, oldval) {
      // console.log('rowNum change',oldval + '->' + v)
      if (this.urlList_live.length < v * v) {
        this.getUrlList(this.urlList_live, v * v);
      }
      if (this.urlList_record.length < v * v) {
        this.getUrlList(this.urlList_record, v * v);
      }
      this.hasFull = false;
      this.setPlayerResize();
    },
  },
  created() {
    console.log("-------created-------");
    console.log(this.connectUrl);
    this.RealTime();
    // this.urlList = [];
    this.getUrlList(this.urlList_live, this.rowNum * this.rowNum);
    this.getUrlList(this.urlList_record, this.rowNum * this.rowNum);
  },
  methods: {
    RealTime() {
      console.log(111);
    },
    moment,
    ...mapActions(["Logout"]),
    ...mapGetters(["avatar", "userInfo", "orgList"]),
    // 选择的域
    chooseArea() {
      if (this.queryParam.regionId) {
        return (
          this.areaList.find(
            (area) => area.serverGBId == this.queryParam.regionId
          ) || {}
        );
      }
      return {};
    },
    // 摄像机可用
    cameraEnable(data) {
      if (!data) return false;
      return (
        (data.used == "1" || data.used == true) &&
        (data.online == "1" || data.online == true)
      );
    },
    // 云台可用
    getPtzEnable(data) {
      if (!data) return false;
      return (
        (data.hasPtz == "1" || data.hasPtz == true) && data.status == "online"
      );
    },
    // 快速录像
    quickRecord(record) {
      console.log("快速录像", record);
      record.recordState = "loading";
      let postData = {
        recordTaskItems: [
          {
            name: "快速录像任务_" + record.name,
            cameraId: record.cameraId,
          },
        ],
        taskDesc: "快速录像任务",
        typeId: "0",
        used: "1",
        cameraRegionId: "4401020049",
      };
      addQuickRecord(postData).then((res) => {
        if (res.code == "00000") {
          console.log(res.data);
          this.$message.success("设置快速录像完成");
          // record.recordState = true;
          this.initDateTree();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    // 录像下载，取消录像下载
    downLoadRecord(record) {
      console.log("download", record);
      // debugger
      // 没下载->去下载
      if (!record.showDownload) {
        console.log("11111");
        record.showDownload = true;
        console.log("2222");
      }
      // 下载中->取消下载
      else {
        record.showDownload = false;
        console.log("3333");
      }
    },
    // 日期方法
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return startValue && startValue > moment().endOf("day");
      }
      return (
        startValue.valueOf() > endValue.valueOf() ||
        (startValue && startValue > moment().endOf("day"))
      );
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return endValue && endValue > moment().endOf("day");
      }
      return (
        startValue.valueOf() >= endValue.valueOf() ||
        (endValue && endValue > moment().endOf("day"))
      );
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 选择域
    areaChoose(e) {
      console.log(this.chooseArea());
      this.dataSource = [];
      this.searchQuery();
    },
    // 查询录像
    // searchQuery() {

    // },
    // 查询录像
    searchReset() {
      let type = this.queryParam.type;
      this.queryParam = {};
      if (this.areaList.length > 0) {
        this.queryParam.regionId = this.areaList[0].serverGBId;
      } else {
        this.queryParam.regionId = "";
      }
      this.queryParam.cameraName = "";
      this.queryParam.taskName = "";
      this.queryParam.type = type;
      (this.startValue = moment().subtract(1, "days")),
        (this.endValue = moment()),
        this.loadData(1);
    },
    getQueryParams() {
      //获取查询条件
      console.log("---------getQueryParams--------");
      let sqp = {};
      var param = Object.assign(sqp, this.queryParam, this.filters);
      // param.field = this.getQueryField();
      param.current = this.ipagination.current;
      param.size = this.ipagination.pageSize;
      param.startDateTime = this.startValue.format("YYYY-MM-DD HH:mm:ss");
      param.endDateTime = this.endValue.format("YYYY-MM-DD HH:mm:ss");
      if (param.type == "camera") param.taskName = "";
      if (param.type == "task") param.cameraName = "";
      param.regionId = param.regionId || "";
      return param;
    },
    // 选择一个播放器
    playerSelected(item, i) {
      console.log("playerSelected");
      this.selectItem = item;
      this.selectNum = i;
      this.ptzEnable = this.getPtzEnable(item);
      this.$nextTick(() => {
        this.$refs.ptz.refreshPtz();
      });
    },
    // 单个播放器的style
    playContainStyle(item, index) {
      let x = index % this.rowNum;
      let y = Math.floor(index / this.rowNum);
      let space = this.borderWidth;
      let left = space + (this.rowWidth + space) * x;
      let top = space + (this.rowHeight + space) * y;
      if (item.isFull)
        return (
          "position: absolute; left:" +
          space +
          "px;top:" +
          space +
          "px;width:calc(100% - " +
          space * 2 +
          "px);height:calc(100% - " +
          space * 2 +
          "px);transition: all 0.2s ease 0s;"
        );
      else
        return (
          "position: absolute; left:" +
          left +
          "px;top:" +
          top +
          "px;width:" +
          this.rowWidth +
          "px;height:" +
          this.rowHeight +
          "px;transition: all 0.2s ease 0s;"
        );

      //return item.isFull ? 'margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);transition: all 0.2s ease 0s;' : 'margin:1px 0 0 1px;width:'+ rowWidth +'px;height:'+ rowHeight +'px;float:left;transition: all 0.2s ease 0s;'
    },
    // 给list，设置初始化数据，应对播放器数量
    getUrlList(list, count) {
      let l = list.length;
      if (l < count) {
        for (let i = l; i < count; i++) {
          list.push({
            index: i,
            isFull: false,
            hasPtz: false,
            playerHeaderText: "",
            playerStatusText: "",
            cameraId: "",
            platformId: "",
            status: "online",
            urlOption: null,
          }); // http://flv.bdplay.nodemedia.cn/live/bbb.flv
        }
      }
    },
    // 设置tree禁止drop，抓手图标css设置 cursor:move
    handle_node_allow_drop(draggingNode, dropNode, type) {
      return false;
    },
    // 父节点，禁止拖拽，子节点拖拽
    handle_node_allow_drag(draggingNode) {
      // if(this.debug)return !draggingNode.data.children;
      return (
        !draggingNode.data.children &&
        draggingNode.data.used == "1" &&
        draggingNode.data.online == "1"
      );
    },
    // el-tree，拖拽结束
    handle_node_drag_end(node, tagEL, position, ev) {
      // console.log('drag end', node.data.label, node.data.url, node, ev)
      // console.log('node', node.data.url)
      // console.log('ev', ev.x)
      // console.log('ev', ev.y)
      let playerContain = this.dropedplayer({ x: ev.x, y: ev.y });
      if (playerContain) {
        let i = playerContain.getAttribute("name");
        // console.log(playerContain)
        // console.log(i)

        if (this.urlList.length >= i) {
          console.log(node.data);
          // this.urlList[i-1].playerHeaderText = node.data.name;
          if (node.data.cameraId) {
            // console.log('直播测试',node.data)
            // let playUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'
            // // this.$refs['player'+i][0].refreshVideoWithUrl(playUrl,'hls',false)
            // this.urlList[i-1].urlOption = {url:playUrl,plugin:'hls',isLive:false};
            // this.urlList[i-1].cameraId = node.data.cameraId;
            // this.urlList[i-1].platformId = node.data.platformId;
            // this.urlList[i-1].playerHeaderText = node.data.name;
            // this.urlList[i-1].hasPtz = node.data.hasPtz;
            // this.urlList[i-1].status = 'online';
            // this.playerSelected(this.urlList[i-1],i);

            getAction("/dispatcher/video/single/" + node.data.cameraId).then(
              (res) => {
                if (res.code == "00000") {
                  console.log(res.data.webrtc);
                  // this.$refs['player'+i][0].refreshVideoWithUrl(res.data.webrtc,'rtc',true)
                  this.urlList[i - 1].urlOption = {
                    url: res.data.webrtc,
                    plugin: "rtc",
                    isLive: true,
                  };
                  this.urlList[i - 1].cameraId = node.data.cameraId;
                  this.urlList[i - 1].platformId = node.data.platformId;
                  this.urlList[i - 1].playerHeaderText = node.data.name;
                  this.urlList[i - 1].hasPtz = node.data.hasPtz;
                  this.urlList[i - 1].status = "online";
                  // this.selectNum = i;
                  this.playerSelected(this.urlList[i - 1], i);
                } else {
                  // A0510:编码器服务异常
                  // A0509:无可用的编码器通道
                  this.$message.warning(res.msg || "获取直播地址错误");
                  // this.close(this.modelList);
                }
              }
            );
          }
        } else {
          console.log("this.urlList长度错误");
        }
      } else {
        this.$message.warn("请拖拽到播放器上");
      }
    },
    // handle_node_drag_end(node, tagEL, position ,ev) {
    // 	// console.log('drag end', node.data.label, node.data.url, node, ev)
    // 	// console.log('node', node.data.url)
    // 	// console.log('ev', ev.x)
    // 	// console.log('ev', ev.y)
    // 	let playerContain = this.dropedplayer({x:ev.x,y:ev.y});
    // 	if(playerContain){
    // 		let i = playerContain.getAttribute('name');
    // 		// console.log(playerContain)
    // 		// console.log(i)

    // 		if(this.urlList.length >= i){
    // 			console.log(node.data)
    // 			// this.urlList[i-1].playerHeaderText = node.data.name;
    // 			if(node.data.cameraId){
    // 				// console.log('直播测试',node.data)
    // 				// let playUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'
    // 				// // this.$refs['player'+i][0].refreshVideoWithUrl(playUrl,'hls',false)
    // 				// this.urlList[i-1].urlOption = {url:playUrl,plugin:'hls',isLive:false};
    // 				// this.urlList[i-1].cameraId = node.data.cameraId;
    // 				// this.urlList[i-1].platformId = node.data.platformId;
    // 				// this.urlList[i-1].playerHeaderText = node.data.name;
    // 				// this.urlList[i-1].hasPtz = node.data.hasPtz;
    // 				// this.urlList[i-1].status = 'online';
    // 				// this.playerSelected(this.urlList[i-1],i);

    // 				getAction("/dispatcher/video/single/" + node.data.cameraId).then((res) => {
    // 					if (res.code == "00000") {
    // 						console.log(res.data.webrtc);
    // 						// this.$refs['player'+i][0].refreshVideoWithUrl(res.data.webrtc,'rtc',true)
    // 						this.urlList[i-1].urlOption = {url:res.data.webrtc,plugin:'rtc',isLive:true};
    // 						this.urlList[i-1].cameraId = node.data.cameraId;
    // 						this.urlList[i-1].platformId = node.data.platformId;
    // 						this.urlList[i-1].playerHeaderText = node.data.name;
    // 						this.urlList[i-1].hasPtz = node.data.hasPtz;
    // 						this.urlList[i-1].status = 'online';
    // 						// this.selectNum = i;
    // 						this.playerSelected(this.urlList[i-1],i);
    // 					} else {
    // 						// A0510:编码器服务异常
    // 						// A0509:无可用的编码器通道
    // 						this.$message.warning(res.msg || "获取直播地址错误");
    // 						// this.close(this.modelList);
    // 					}
    // 				})
    // 			}
    // 		}
    // 		else{
    // 			console.log('this.urlList长度错误');
    // 		}

    // 	}
    // 	else{
    // 		this.$message.warn('请拖拽到播放器上')
    // 	}
    // },
    // demo10
    dropedplayer(mouseXY) {
      // console.log(typeof document.getElementsByClassName('itemcontent'))
      // console.log(document.getElementsByClassName('itemcontent')[0])
      var arr = [...document.getElementsByClassName("playerContain")];
      return arr.find((item) => {
        let parentRect = item.getBoundingClientRect();
        return (
          mouseXY.x > parentRect.left &&
          mouseXY.x < parentRect.right &&
          mouseXY.y > parentRect.top &&
          mouseXY.y < parentRect.bottom
        );
      });
    },
    // 切换管理端
    toManager() {
      this.$router
        .push({
          path: "/dashboard/analysis",
        })
        .catch(() => {
          console.log("登录跳转首页出错,这个错误从哪里来的");
        });
    },
    // 退出
    handleLogout() {
      const that = this;
      this.$confirm({
        title: "提示",
        content: "真的要注销登录吗 ?",
        onOk() {
          that.pageLogout();
        },
        onCancel() {},
      });
    },
    pageLogout() {
      this.Logout({})
        .then(() => {
          Vue.ls.remove(USER_INFO);
          eventBus.$emit("logout", "logout");
          // update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
          this.$router.push({ path: "/user/login" });
          // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
          //window.location.reload()
        })
        .catch((err) => {
          this.$message.error({
            title: "错误",
            description: err.message,
          });
        });
    },
    // 查看录像时获取外站接口
    getAreaList() {
      // console.log('-----------')
      // this.areaList = [{
      // 		name:'area1',
      // 		platformId:'44010200492000000001',
      // 		domainType:'1',//本域
      // 		relation:'0',//未知
      // 		state:'1',//在线
      // 	},
      // 	{
      // 		name:'area2',
      // 		platformId:'44010200492000000002',
      // 		domainType:'2',//外域
      // 		relation:'2',//互联
      // 		state:'1',//下线
      // 	},
      // 	{
      // 		name:'area3',
      // 		platformId:'platformId3',
      // 		domainType:'2',//外域
      // 		relation:'1',//下级
      // 		state:'3',//禁用
      // 	}]
      // this.queryParam.regionId = this.areaList[0].platformId;
      // this.loadData(1)

      getPlatformList().then((res) => {
        if (res.code == "00000") {
          console.log(res.data);
          // 过滤platformId 不为空
          this.areaList = res.data.filter((item) => {
            return item.platformId;
          });
          console.log(this.areaList);
          // 默认显示第一个域
          if (this.areaList.length > 0) {
            this.queryParam.regionId = this.areaList[0].serverGBId;
          }
          this.loadData(1);
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    // 初始化数据
    initDateTree() {
      if (this.playMode == "live") {
        // if(this.debug) return;

        // 	this.treeDataEL = [
        // 	{
        // 		"domainType":"1",
        // 		"children":[
        // 			{
        // 				"cameraId":"9c780cfbefb84811a884aa8da432bf93",
        // 				"devId":"17c134ea14c64a85a09c79497e903768",
        // 				"devCode":null,
        // 				"devName":null,
        // 				"relationDeviceIndex":1,
        // 				"name":"2号摄像机",
        // 				"cameraDesc":"大马路摄像机",
        // 				"location":"东北大马路",
        // 				"used":"1",
        // 				"online":"1",
        // 				"encodeParam":"1",
        // 				"streamAddr":"rtsp://192.168.3.102/live/test",
        // 				"hasPtz":"0",
        // 				"ptzAddr":"222",
        // 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
        // 				"ptzProtocol":"ONVIF",
        // 				"recordState":false,
        // 				"createTime":"2022-04-08 00:00:00",
        // 				"updateTime":"2022-04-20 10:35:21",
        // 				"platformId":"111"
        // 			}
        // 		],
        // 		"label":"本域",
        // 		"state":"1",
        // 		"platformId":"111"
        // 	},
        // 	{
        // 		"domainType":"2",
        // 		"children":[
        // 			{
        // 				"cameraId":"9c780cfbefb84811a884aa8da432bf93",
        // 				"devId":"17c134ea14c64a85a09c79497e903768",
        // 				"devCode":null,
        // 				"devName":null,
        // 				"relationDeviceIndex":1,
        // 				"name":"2号摄像机",
        // 				"cameraDesc":"大马路摄像机",
        // 				"location":"东北大马路",
        // 				"used":"1",
        // 				"online":"1",
        // 				"encodeParam":"1",
        // 				"streamAddr":"rtsp://192.168.3.102/live/test",
        // 				"hasPtz":"1",
        // 				"ptzAddr":"222",
        // 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
        // 				"ptzProtocol":"ONVIF",
        // 				"recordState":false,
        // 				"createTime":"2022-04-08 00:00:00",
        // 				"updateTime":"2022-04-20 10:35:21",
        // 				"platformId":"222"
        // 			},
        // 			{
        // 				"cameraId":"9539da942929443b8763cb6efd8504bb",
        // 				"devId":"dc172e99b441494e88e53dddaa94085c",
        // 				"devCode":null,
        // 				"devName":null,
        // 				"relationDeviceIndex":1,
        // 				"name":"摄像机1",
        // 				"cameraDesc":null,
        // 				"location":null,
        // 				"used":"1",
        // 				"online":"1",
        // 				"encodeParam":"",
        // 				"streamAddr":null,
        // 				"hasPtz":"1",
        // 				"ptzAddr":null,
        // 				"ptzProtocolGroup":"ONVIF;GB28181;PELCO-D;PELCO-P",
        // 				"ptzProtocol":"ONVIF",
        // 				"recordState":false,
        // 				"createTime":"2022-05-06 19:09:22",
        // 				"updateTime":"2022-05-06 19:09:22",
        // 				"platformId":"222"
        // 			},
        // 		],
        // 		"label":"外域",
        // 		"state":"1",
        // 		"platformId":"222"
        // 	}
        // ];

        // 外域下线或者禁用，不显示摄像机
        getAction("/dev/camera/region-group").then((res) => {
          if (res.code == "00000") {
            res.data.forEach((area) => {
              if (
                area.domainType == "2" &&
                (area.state == "2" || area.state == "3")
              ) {
                area.children = [];
              }
            });
            console.log(res.data);
            this.treeDataEL = res.data;
          } else {
            this.$message.warning("获取摄像机列表失败，请重新获取");
            // this.close(this.modelList);
          }
        });
      } else if (this.playMode == "record") {
        // !this.debug && this.loadData(1)
        this.getAreaList();
      }
    },
    // 直播，录像切换
    playModeChange(value) {
      this.playMode = value;
      this.initDateTree();
    },
    // 刷新页面布局，计算宽高，播放器宽高
    updateLayoutView() {
      console.log("----------updateLayoutView-----------");
      //设置播放器宽度
      this.$nextTick(() => {
        //监听到事件后执行的业务逻辑
        // console.log('layoutContain nextTick');
        // console.log(this.rowNum,this.colNum)
        // console.log(this.ratio)
        // console.log(this.screenWidth)
        // console.log(this.screenHeight)
        var div = document.getElementById("layoutContain");
        this.layoutWidth = div.getBoundingClientRect().width;
        this.layoutHeight = div.getBoundingClientRect().height;
        this.rowWidth =
          (this.layoutWidth - this.borderWidth * (this.colNum + 1)) /
          this.colNum;
        this.rowHeight =
          (this.layoutHeight - this.borderWidth * (this.rowNum + 1)) /
          this.rowNum;
        // console.log(this.rowNum)
        console.log(this.layoutWidth);
        console.log(this.layoutHeight);
        console.log(this.rowWidth);
        console.log(this.rowHeight);
        this.checkLayout();
      });
    },
    layoutUpdatedEvent(newLayout) {
      // console.log('layoutUpdatedEvent',newLayout)
      this.checkLayout();
    },
    // 刷新this.layout，数据用于排序
    checkLayout() {
      if (!this.layout || this.layout.length == 0) {
        return;
      }
      this.$nextTick(() => {
        // console.log('--------checkLayout--------')
        // console.log(this.layout);
        // console.log(this.rowNum,this.colNum);
        let arr = this.layout.filter(
          (item) =>
            item.x + item.w > this.colNum || item.y + item.h > this.rowNum
        );
        // console.log(this.arr)
        arr.forEach((item) => {
          let index = this.layout.map((item) => item.i).indexOf(item.i);
          this.layout.splice(index, 1);
        });
      });
    },
    // 以下antdv-tree,未使用
    onSelect(selectedKeys, info) {
      console.log("selected", selectedKeys, info);
    },
    onDragEnter(info) {
      console.log(info);
    },
    onDragend(info) {
      console.log(info);
    },
    onDrop(info) {
      console.log(info);
    },
    // 录像拖拽
    recordDragend(e) {
      console.log("OnDragend", e);
      let playerContain = this.dropedplayer({ x: e.x, y: e.y });
      if (playerContain) {
        let i = playerContain.getAttribute("name");
        // console.log(playerContain)
        // console.log(i)

        if (this.urlList.length >= i) {
          let dragObj =
            JSON.parse(e.srcElement.getAttribute("record")) ||
            JSON.parse(e.srcElement.parentNode.getAttribute("record"));
          // 标题栏
          this.urlList[i - 1].playerHeaderText =
            dragObj.cameraName +
            " / " +
            dragObj.taskName +
            " / " +
            dragObj.startDateTime +
            " - " +
            dragObj.endDateTime;
          console.log(dragObj.recordUrl);
          // let playUrl = dragObj.recordUrl
          let playUrl = this.debug
            ? "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8"
            : dragObj.recordUrl;

          console.log(this.chooseArea().domainType);
          console.log(dragObj);
          // 外域
          if (this.chooseArea().domainType != "1") {
            let postData = {
              regionId: this.queryParam.regionId,
              cameraId: dragObj.cameraId,
              targetPlayUrl: dragObj.recordUrl,
            };
            otheRegionRecordUrl(postData).then((res) => {
              if (res.code == "00000") {
                console.log(res.data);
                let ret = res.data;
                this.playRecord(i, ret.url, ret.type, ret.isLive);
              } else {
                this.$message.warning(res.code + res.msg);
              }
            });
          }
          // 本域
          else {
            this.playRecord(i, playUrl, "hls", false);
          }
        } else {
          console.log("this.urlList长度错误");
        }
      } else {
        this.$message.warn("请拖拽到播放器上");
      }
    },
    // recordDragend(e){
    // 	console.log('OnDragend',e)
    // 	let playerContain = this.dropedplayer({x:e.x,y:e.y});
    // 	if(playerContain){
    // 		let i = playerContain.getAttribute('name');
    // 		// console.log(playerContain)
    // 		// console.log(i)

    // 		if(this.urlList.length >= i){
    // 			let dragObj = JSON.parse(e.srcElement.getAttribute('record')) || JSON.parse(e.srcElement.parentNode.getAttribute('record'));
    // 			// 标题栏
    // 			this.urlList[i-1].playerHeaderText = dragObj.cameraName + ' / ' + dragObj.taskName + ' / ' + dragObj.startDateTime + ' - ' + dragObj.endDateTime;
    // 			console.log(dragObj.recordUrl)
    // 			// let playUrl = dragObj.recordUrl
    // 			let playUrl = this.debug ? 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8' : dragObj.recordUrl

    // 			console.log(this.chooseArea().domainType)
    // 			console.log(dragObj)
    // 			// 外域
    // 			// 转换时间戳
    // 			// const startDateTime = Date.parse(new Date(dragObj.startDateTime)).toString();
    // 			// startDateTime = startDateTime.substr(0,10)
    // 			// const endDateTime = Date.parse(new Date(dragObj.endDateTime)).toString();
    // 			// endDateTime = endDateTime.substr(0,10)
    // 			// const startDateTime = new Date(dragObj.startDateTime).getTime()/1000
    // 			// console.log(startDateTime,'=====')
    // 			// const endDateTime = new Date(dragObj.endDateTime).getTime()/1000
    // 			if(this.chooseArea().domainType != '1'){
    // 				console.log(this.chooseArea().domainType!='1','=======')
    // 				let dragObj = JSON.parse(e.srcElement.getAttribute('record')) || JSON.parse(e.srcElement.parentNode.getAttribute('record'));
    // 				// 标题栏
    // 				this.urlList[i-1].playerHeaderText = dragObj.cameraName + ' / ' + dragObj.taskName + ' / ' + dragObj.startDateTime + ' - ' + dragObj.endDateTime;
    // 				console.log(dragObj.recordUrl)
    // 				// let playUrl = dragObj.recordUrl
    // 				let playUrl = this.debug ? 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8' : dragObj.recordUrl

    // 				console.log(this.chooseArea().domainType)
    // 				// let postData = {
    // 				// 	regionId: this.queryParam.regionId,
    // 				// 	cameraId: dragObj.cameraId,
    // 				// 	targetPlayUrl: dragObj.recordUrl,
    // 				// 	startDateTime:startDateTime,
    // 				// 	endDateTime: endDateTime
    // 				// }
    // 				this.playRecord(i,playUrl,'hls',false)
    // 				// otheRegionRecordUrl().then(res => {
    // 				// 	if (res.code == '00000') {
    // 				// 		console.log(res.data)
    // 				// 		let ret = res.data;
    // 				// 		// this.playRecord(i, ret.url, ret.type, ret.isLive);
    // 				// 		this.playRecord(i,playUrl,'hls',false)
    // 				// 	} else {
    // 				// 		this.$message.warning(res.code + res.msg);
    // 				// 	}
    // 				// })
    // 			}
    // 			// 本域
    // 			else{
    // 				this.playRecord(i,playUrl,'hls',false)
    // 			}
    // 		}
    // 		else{
    // 			console.log('this.urlList长度错误');
    // 		}
    // 	}
    // 	else{
    // 		this.$message.warn('请拖拽到播放器上')
    // 	}
    // },
    // 播放器播放录像url
    playRecord(i, playUrl, type, isLive) {
      // this.$refs['player'+i][0].refreshVideoWithUrl(playUrl,type,isLive)
      this.urlList[i - 1].urlOption = {
        url: playUrl,
        plugin: type,
        isLive: isLive,
      };
      // this.urlList[i-2].urlOption = {url:playUrl,plugin:type,isLive:isLive};
    },
    //单个播放器停止
    setPlayerClose(index) {
      console.log("setPlayerClose", index);
      // if(this.urlList.length > index){
      // 	let item = this.urlList[index]
      // 	item.cameraId = '';
      // 	item.platformId = '';
      // 	item.status = 'online';
      // 	item.playerHeaderText = '';
      // 	console.log(this.urlList)
      // }
      // else{
      // 	console.log('数据错误');
      // }
    },
    //单个播放器全屏到多画面
    setPlayerFullScreen(index) {
      console.log("setPlayerFullScreen", index);
      if (this.urlList.length > index) {
        let item = this.urlList[index];
        item.isFull = true;
        this.hasFull = true;
        console.log(this.urlList);
      } else {
        console.log("数据错误");
      }
    },
    //单个播放器取消全屏
    setPlayerCancelFullScreen(index) {
      console.log("setPlayerCancelFullScreen", index);
      if (this.rowNum == 1) {
        console.log("1*1屏，不用全屏");
        return;
      }
      if (this.urlList.length > index) {
        let item = this.urlList[index];
        item.isFull = false;
        this.hasFull = false;
        console.log(this.urlList);
      } else {
        console.log("数据错误");
      }
    },
    // 多画面各个播放器复位
    setPlayerResize() {
      this.urlList.forEach((item) => {
        item.isFull = false;
      });
    },
    allPlayPause() {
      let allPause = this.allPause();
      if (allPause) {
        console.log("全体开始播放");
      } else {
        console.log("全体暂停播放");
      }
      // 如果全体静音，点击全体开启
      var arr = [...document.getElementsByClassName("playerContain")];
      arr.forEach((item) => {
        let i = item.getAttribute("name");
        let player = this.$refs["player" + i][0];
        // 如果全体静音，点击全体开启, 否则全体静音
        player.videoStart(allPause);
      });
    },
    allPause() {
      var arr = [...document.getElementsByClassName("playerContain")];
      let ret = arr.every((item) => {
        let i = item.getAttribute("name");
        // console.log(this.$refs['player' + i][0].volumeValue)
        return this.$refs["player" + i][0].playing == false;
      });
      return ret;
    },
    allPlayerStop() {
      var arr = [...document.getElementsByClassName("playerContain")];
      arr.forEach((item) => {
        let i = item.getAttribute("name");
        let player = this.$refs["player" + i][0];
        player.videoStop();
      });
    },
    allVolumeControl() {
      let allmute = this.allVolumeMute();
      // 如果全体静音，点击全体开启
      var arr = [...document.getElementsByClassName("playerContain")];
      arr.forEach((item) => {
        let i = item.getAttribute("name");
        let player = this.$refs["player" + i][0];
        // 如果全体静音，点击全体开启, 否则全体静音
        player.volumeValue = allmute ? player.saveVolumeValue : 0;
      });
    },
    allVolumeMute() {
      var arr = [...document.getElementsByClassName("playerContain")];
      let ret = arr.every((item) => {
        let i = item.getAttribute("name");
        // console.log(this.$refs['player' + i][0].volumeValue)
        return this.$refs["player" + i][0].volumeValue == 0;
      });
      return ret;
    },
    // 以下多画面全屏
    // 全屏点击方法
    fullscreenClick() {
      var video = document.getElementById("layoutContain");
      // 退出全屏
      if (this.isFullScreen) {
        this.cancelFullscreen();
        this.isFullScreen = false;
        window.onresize = null;
      } else {
        this.fullscreen(video);
        this.isFullScreen = true;
        window.onresize = this.onresize;
      }
    },
    // window 监听是否全屏
    onresize() {
      console.log("window.onresize");
      var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      this.isFullScreen = isFull ? true : false;
      if (this.isFullScreen == false) {
        window.onresize = null;
      }
    },
    // 全屏
    fullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        console.log("这是全屏");
      }
    },
    // 退出全屏
    cancelFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msCancelFullscreen) {
        document.msCancelFullscreen();
      } else if (document.oCancelFullscreen) {
        document.oCancelFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else {
        console.log("请按ESC退出全屏");
      }
    },
    // 创建mqtt连接
    createConnection() {
      this.options.clientId =
        this.userInfo().loginName +
        "-" +
        Math.random().toString(16).substr(2, 8);
      this.client = mqtt.connect(this.connectUrl, this.options);
      //建立连接
      this.client.on("connect", (e) => {
        //订阅主题
        this.client.subscribe(
          this.topic,
          {
            qos: 2,
          },
          (err) => {
            if (!err) {
              console.log(">>>>>>订阅成功", this.options.clientId);
            } else {
              console.log(">>>>>>订阅失败", this.options.clientId);
            }
          }
        );
      });
      //监听接收消息
      this.client.on("message", (topic, message) => {
        // console.log(`${message}`)
        console.log(`${message}`);
        let messageobj = JSON.parse(message) || {};
        let type = messageobj.bizType;
        let payload = messageobj.payload;
        if (!payload) {
          this.$message.warn("推送消息格式错误，无payload");
        }
        // {"bizType":"forced_user_logout","payload":{"userId":"98ffc763488b452f9677153c6c298685"}}
        // {"bizType":"delete_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"unused_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"unused_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"offline_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"offline_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"online_device","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"online_camera","payload":{"cameraId":"9539da942929443b8763cb6efd8504bb","name":"摄像机1"}}
        // {"bizType":"delete_platform","payload":{"platformId":"222","name":"200下级"}}
        // {"bizType":"unused_platform","payload":{"platformId":"222","name":"200下级"}}
        // {"bizType":"offline_platform","payload":{"platformId":"222","name":"200下级"}}
        // {"bizType":"online_platform","payload":{"platformId":"222","name":"200下级"}}

        if (type == "forced_user_logout") {
          let userId = payload.userId;
          if (userId != this.userInfo().userId) {
            console.log("推送的客户id不是当前客户");
            return;
          }
          this.$message.warn("当前用户被管理员强制下线");
          this.pageLogout();
        } else if (type == "delete_device") {
          if (payload.cameraId) {
            this.refreshDevice(payload, "delete");
          }
        } else if (type == "unused_device" || type == "unused_camera") {
          if (payload.cameraId) {
            this.refreshDevice(payload, "unused");
          }
        } else if (type == "offline_device" || type == "offline_camera") {
          if (payload.cameraId) {
            this.refreshDevice(payload, "offline");
          }
        } else if (type == "online_device" || type == "online_camera") {
          if (payload.cameraId) {
            this.refreshDevice(payload, "online");
          }
        } else if (type == "delete_platform") {
          // if(payload.platformId){
          this.refreshPlatform(payload, "delete");
          // }
        } else if (type == "unused_platform") {
          if (payload.platformId) {
            this.refreshPlatform(payload, "unused");
          }
        } else if (type == "offline_platform") {
          if (payload.platformId) {
            this.refreshPlatform(payload, "offline");
          }
        } else if (type == "online_platform") {
          if (payload.platformId) {
            this.refreshPlatform(payload, "online");
          }
        } else if (type == "record_alarm") {
          console.log("录像报警");
          if (payload.msg) {
            this.$message.warn(payload.msg);
          }
        } else {
          console.log("未知消息类型");
        }
      });
    },
    // 树包含摄像机
    treeDataELContainCamera(cameraId) {
      let isFind = false;
      this.treeDataEL.forEach((item) => {
        item.children.forEach((cameraItem) => {
          if (cameraId == cameraItem.cameraId) {
            isFind = true;
          }
        });
      });
      return isFind;
    },
    // 树包含域
    treeDataELContainPlatform(platformId) {
      let ret = this.treeDataEL.find((item) => item.platformId == platformId);
      return ret ? true : false;
    },
    // mqtt：设备，摄像机处理 ,type: delete , unused, offline ,online
    refreshDevice(payload, type) {
      if (this.playMode != "live") {
        console.log("不是直播页面，不处理相关推送消息");
        return;
      }
      if (
        !(
          type == "delete" ||
          type == "unused" ||
          type == "offline" ||
          type == "online"
        )
      ) {
        console.log("推送错误");
        return;
      }
      let showtext = "(删除)";
      if (type == "unused") showtext = "(禁用)";
      if (type == "offline") showtext = "(离线)";
      if (type == "online") showtext = "(上线)";

      // treeDataEL 必须重刷,因为不知道哪些设备启用了
      if (this.treeDataELContainCamera(payload.cameraId)) {
        console.log("树结构包含该摄像机，重刷");
        this.initDateTree();
        // 弹窗禁用信息
        this.$message.warn(payload.name + showtext);
      } else {
        console.log("树结构不包含该摄像机");
      }

      this.urlList.forEach((urlitem) => {
        if (urlitem.cameraId == payload.cameraId) {
          console.log("设备推送消息-播放器处理");
          urlitem.playerStatusText = type == "online" ? "" : showtext;
          // urlitem.hasPtz = false
          urlitem.isFull = false;
          urlitem.status = type;
          let i = parseInt(this.urlList.indexOf(urlitem)) + 1;
          let player = this.$refs["player" + i][0];
          if (type == "delete" || type == "unused" || type == "offline") {
            player.player_destroy();
          } else {
            player.videoStart(true);
          }
          // 如果是当前播放设备，云台改变，
          if (this.selectNum == i) {
            this.playerSelected(urlitem, i);
          }
        }
      });
    },
    // mqtt：平台处理 ,type: delete , unused, offline ,online
    refreshPlatform(payload, type) {
      if (this.playMode != "live") {
        console.log("不是直播页面，不处理相关推送消息");
        return;
      }
      if (
        !(
          type == "delete" ||
          type == "unused" ||
          type == "offline" ||
          type == "online"
        )
      ) {
        console.log("推送错误");
        return;
      }
      let showtext = "(删除)";
      if (type == "unused") showtext = "(禁用)";
      if (type == "offline") showtext = "(离线)";
      if (type == "online") showtext = "(上线)";
      // treeDataEL
      if (this.treeDataELContainPlatform(payload.platformId)) {
        console.log("树结构包含该域，重刷");
        this.initDateTree();
        // 弹窗禁用信息
        this.$message.warn(payload.name + showtext);
      } else {
        console.log("树结构不包含该域");
      }

      this.urlList.forEach((urlitem) => {
        if (urlitem.platformId == payload.platformId) {
          console.log("域推送消息-播放器处理");
          urlitem.playerStatusText = type == "online" ? "" : showtext;
          // urlitem.hasPtz = false
          urlitem.isFull = false;
          urlitem.status = type;
          let i = parseInt(this.urlList.indexOf(urlitem)) + 1;
          let player = this.$refs["player" + i][0];
          if (type == "delete" || type == "unused" || type == "offline") {
            player.player_destroy();
          } else {
            player.videoStart(true);
          }
          // 如果是当前播放设备，云台改变，
          if (this.selectNum == i) {
            this.playerSelected(urlitem, i);
          }
        }
      });
    },
  },
  mounted() {
    console.log("mounted", this.userInfo());
    this.initDateTree();
    // 监听layoutContain宽高变化
    const _this = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("layoutContain"), (element) => {
      console.log("layoutContain change");
      _this.$nextTick(() => {
        _this.updateLayoutView();
      });
    });
    // mqtt
    this.createConnection();
    // 只播放器监听全屏，退出全屏
    eventBus.$on("playerClose", this.setPlayerClose);
    eventBus.$on("playerFull", this.setPlayerFullScreen);
    eventBus.$on("playerCancelFull", this.setPlayerCancelFullScreen);
  },
  beforeDestroy() {
    eventBus.$off("playerClose");
    eventBus.$off("playerFull");
    eventBus.$off("playerCancelFull");
    if (this.client) {
      this.client.end();
    }
  },
};
</script>


<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  color: white;
  background-color: #111111;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #111111;
  border-bottom: 3px solid #bf7732;
}
.logoSection {
  position: relative;
  width: 250px;
  height: 100%;
  float: left;
  .headerLogo {
    background-image: url(img/logo.png);
    background-size: cover;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 250px;
    height: 70px;
    // transform: translate(-50%, -50%);
  }
  .headerTitle {
    position: absolute;
    text-align: left;
    height: 100%;
    line-height: 77px;
    left: 95px;
    right: 0;
    font-size: 36px;
    font-family: "Microsoft YaHei";
  }
}
.menuSection {
  position: relative;
  // width: 800px;
  height: 100%;
  margin-left: 10px;
  padding-top: 22px;
  float: left;
}
.ant-btn-primary {
  color: #fff;
  background-color: #111111;
  border-color: transparent;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}
.btnSelected {
  color: #bf7732;
}
.ant-btn {
  font-size: 18px;
}
.systemConfig {
  position: relative;
  // width: 800px;
  height: 100%;
  margin-right: 20px;
  padding-top: 22px;
  float: right;
}
.iconContain {
  float: left;
  margin-left: 5px;
  height: 27px;
  width: 27px;
  cursor: pointer;
}
.iconsize {
  font-size: 20px;
}
.grid1 {
  background: url(img/grid1.png) no-repeat 50% 50%;
}
.grid2 {
  background: url(img/grid2.png) no-repeat 50% 50%;
}
.grid3 {
  background: url(img/grid3.png) no-repeat 50% 50%;
}
.playerplay {
  background: url(img/smallplay.png) no-repeat 50% 50%;
  background-size: cover;
}
.playerpause {
  background: url(img/smallpause.png) no-repeat 50% 50%;
  background-size: cover;
}
.playerstop {
  background: url(img/smallstop.png) no-repeat 50% 50%;
  background-size: cover;
}
.unmutevolume {
  background: url(img/unmutevolume.png) no-repeat 50% 50%;
  background-size: cover;
}
.mutevolume {
  background: url(img/volumemute.png) no-repeat 50% 50%;
  background-size: cover;
}
.mulifull {
  background: url(img/fullscreen.png) no-repeat 50% 50%;
  background-size: cover;
}
.logout_title {
  color: white;
  text-decoration: none;
}
.center {
  position: absolute;
  top: 80px;
  bottom: 30px;
  left: 0;
  right: 0;
  background-color: #111111;
  // .showArea{

  // }
  // .tool{
  // 	position: absolute;
  // 	width: 280px;
  // 	height: 100%;
  // 	right: 0;
  // 	background-color: red;
  // }
}
.platicon {
  position: absolute;
  right: 0px;
  width: 50px;
  height: 36px;
  line-height: 36px;
  margin-top: 0;
  cursor: pointer;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background-color: #262d33;
  color: white;
  line-height: 28px;
}
.btn {
  position: relative;
  float: left;
  width: 84px;
  height: 50px;
  margin: 2px;
  color: white;
  line-height: 46px;
  text-align: center;
  background-color: #1b1e23;
  border: 2px solid #383d41;
  font-size: 16px;
  cursor: pointer;
}
.btn[disabled] {
  filter: brightness(0.6);
}
.btn:not([disabled]):hover {
  background-color: #3d4248;
}
.btn:not([disabled]):active {
  background-color: #111111;
}
.playerHeader {
  width: 100%;
  height: 20px;
  padding-left: 10px;
  background-color: #252f2e;
  border-bottom: 1px solid #383d41;
}
</style>
<style lang="scss" scoped>
// /deep/ .ant-slider{
// 	width: 100%;
// 	left: 0;
// 	margin-left: 0px;
// 	margin-right: 0px;
// 	position: absolute;
// 	z-index: 1;
// }
// /deep/ .ant-slider .ant-slider-track{
// 	background-color: #0a69bf;
// }
// /deep/ .ant-slider .ant-slider-rail{
// 	background-color: rgba(255, 255, 255,0.15);
// }

// /deep/ .ant-modal-content {
// 	background-color: blue;
// }

/deep/ .ant-select-dropdown {
  background-color: #383d41; //tudo
}
/deep/ .ant-select-selection--single {
  height: 28px;
  color: white;
}
/deep/ .ant-select-open .ant-select-selection,
/deep/ .ant-select-enabled .ant-select-selection,
/deep/ .ant-select-selection:hover {
  border: 1px solid #d9d9d9;
}

/deep/ .ant-select-selection {
  background-color: transparent;
  border: 1px solid #d9d9d9;
}

/deep/ .ant-tree {
  overflow-y: auto;
  height: 100%;
  color: white;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
  color: white;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
/deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
  background-color: #737373;
}

/deep/ .el-tree {
  background: transparent;
  color: #dddddd;
  overflow-y: auto;
}
/*鼠标移动到*/
/deep/ .el-tree-node__content:hover {
  background-color: transparent;
  color: #6d6d72;
}
/*点击*/
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #3d4148;
}
/*选中*/
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #3d4148 !important;
}
/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
/deep/ .el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #6d6d72;
}
/deep/ .el-tree.is-dragging.is-drop-not-allow .el-tree-node__content {
  cursor: move;
}

/deep/ .ant-collapse-borderless,
/deep/ .ant-input {
  background-color: transparent;
  color: #dddddd;
}
/deep/ .ant-input:hover,
/deep/ .ant-input:focus {
  // border: 1px solid #bf7732;
}
/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header,
/deep/ .ant-collapse-content,
/deep/ .ant-form-item-label > label {
  color: white;
}
/deep/ .ant-collapse-borderless > .ant-collapse-item {
  // border-bottom: 1px solid #383d41;
}
/deep/ .ant-row.ant-form-item {
  width: 100%;
}
/deep/ .ant-radio-button-wrapper {
  width: 75px;
  text-align: center;
  background: transparent;
  color: white;
}
/deep/
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: transparent;
  color: #1890ff;
  // color:#bf7732;
  // border-color: #bf7732;
  // box-shadow: -1px 0 0 0 #bf7732;
}
/deep/
  .ant-collapse-borderless
  > .ant-collapse-item
  > .ant-collapse-content
  > .ant-collapse-content-box,
/deep/
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th {
  padding: 4px;
}

/deep/ .ant-table,
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-pagination,
/deep/ .ant-select-dropdown-menu-item,
/deep/ .ant-select-dropdown-menu-item-selected,
/deep/ .ant-pagination-item a,
/deep/ .ant-empty-normal {
  color: #dddddd;
}
/deep/ .ant-select-dropdown-menu-item:hover,
/deep/ .ant-select-dropdown-menu-item-active,
/deep/ .ant-select-dropdown-menu-item-selected {
  background-color: #222222;
}
/deep/ .ant-table-small {
  border-width: 0;
}

/deep/ .ant-table-row {
  border-top: 2px solid transparent;
}
// /deep/ .ant-table-row:hover,
// /deep/ table:hover,
// /deep/ tr:hover,
// /deep/ thead:hover{
// 	background: red;
// }
// 表格选中状态
/deep/ .ant-table-row:hover > td {
  background: rgba(255, 255, 255, 0.15) !important;
}

/deep/ .ant-table table {
  border-collapse: collapse;
}
/deep/ .ant-pagination-item-active,
/deep/ .ant-table-placeholder {
  background-color: transparent;
}
/deep/
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td {
  padding: 4px;
}
</style>
<style lang="less">
body {
  // background-color: yellow;
  overflow-y: auto;
}
.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title span,
.ant-dropdown-menu-dark .ant-dropdown-menu-item,
.ant-dropdown-menu-dark .ant-dropdown-menu-item-group-title {
  color: white;
}
.ant-dropdown-menu-dark,
.ant-dropdown-menu-dark ul.ant-dropdown-menu {
  background: #383d41;
}
</style>